import React, { Component } from 'react';

class FormDemo extends Component {
  constructor (props) {
    super(props);
    this.state = {
      inputValue: '',
      textAreaValue: '',
      radioValue: '',
      checkBoxValue: []
    };
  }
  inputChange (e) {
    // console.log(e.target.value);
    let inputValue = e.target.value.substring(0, 5).toUpperCase();
    this.setState({inputValue})
  }
  textAreaChange (e) {
    console.log(e.target.value);
    let textAreaValue = e.target.value;
    this.setState({textAreaValue});
  }
  radioChange (e) {
    console.log(e.target.value);
    let radioValue = parseInt(e.target.value, 10);
    this.setState({radioValue});
  }
  checkBoxChange (e) {
    // console.log(e.target.value);
    let {checkBoxValue} = this.state;
    let {checked, value} = e.target;
    console.log(checked, value);
    if (checked && checkBoxValue.indexOf(value) === -1) {
      checkBoxValue.push(value);
    } else {
      checkBoxValue = checkBoxValue.filter(item => item !== value);
    }
    this.setState({checkBoxValue});
  }
  render() {
    let {inputValue, textAreaValue, radioValue, checkBoxValue} = this.state;
    return (
      <div>
        <h3>表单Demo</h3>
        <div>
          单行输入框
          <input type="text" value={inputValue} onChange={this.inputChange.bind(this)}/>
        </div>
        <br/>
        <div>
          多行输入框
          <textarea value={textAreaValue} onChange={this.textAreaChange.bind(this)}></textarea>
          <div>{textAreaValue}</div>
        </div>
        <br/>
        <div>
          单选框
          <label>
            <input type="radio" value={1} checked={radioValue === 1} onChange={this.radioChange.bind(this)}/> 1
          </label>
          <label>
            <input type="radio" value={2} checked={radioValue === 2} onChange={this.radioChange.bind(this)}/> 2
          </label>
        </div>
        <div>
          复选框:
          <label>
            <input type="checkbox" value="apple" onChange={this.checkBoxChange.bind(this)} checked={checkBoxValue.indexOf('apple') !== -1}/> apple
          </label>
          <label>
            <input type="checkbox" value="banana" onChange={this.checkBoxChange.bind(this)} checked={checkBoxValue.indexOf('banana') !== -1}/> banana
          </label>
          <label>
            <input type="checkbox" value="peach" onChange={this.checkBoxChange.bind(this)} checked={checkBoxValue.indexOf('peach') !== -1}/> peach
          </label>
        </div>
      </div>
    );
  }

}

export default FormDemo;
